<ion-header>
  <ion-toolbar class="toolbar-head">
    <!-- <ion-icon slot="start"   name="close"></ion-icon> -->
    <!-- <ion-buttons slot="start" mode='ios' style="margin-left: 5px;">
      <ion-back-button icon='close' text=""></ion-back-button>
    </ion-buttons> -->
    <img slot="start" (click)="close()" src="../../../../assets/img/login-back.png"
      style="height: 15px;margin-left: 10px;width: 15px;" alt="">
    <ion-title>Filter</ion-title>
    <label style="color: white; margin-right: 10px;" slot="end" (click)="openItem(0)">Clear all</label>
  </ion-toolbar>
</ion-header>
<ion-content> 

  <!-- <div class="filtrate-item" (click)="openItem(1)">
    <ion-label>Size</ion-label>
    <img *ngIf="activeKey1!=1?true:false" class="filtrate-item-img" src="../../../../assets/img/f-right.png" alt="">
    <img *ngIf="activeKey1==1?true:false" class="filtrate-item-img-1" src="../../../../assets/img/down.png" alt="">
  </div>
  <div class="filtrate-connect">
    <div *ngIf="activeKey1!=1?true:false" style="border-bottom:1px solid rgba(188,188,188,1);"></div>
    <div *ngIf="measureList">
      <span class="filtrate-connect-span" *ngFor="let item of measureList;let idx=index;"
        [ngClass]="{true: 'brand-sapn-class-1',false:'brand-sapn-class'}[item.select]"
        (click)="onMeasure(idx)">{{item.procStandards}}</span>
    </div>
  </div> -->




  <div class="filtrate-item" (click)="openItem(2)">
    <ion-label>Brands</ion-label>
    <img *ngIf="activeKey2!=2?true:false" class="filtrate-item-img" src="../../../../assets/img/f-right.png" alt="">
    <img *ngIf="activeKey2==2?true:false" class="filtrate-item-img-1" src="../../../../assets/img/down.png" alt="">
  </div>
  <div class="filtrate-connect">
    <div *ngIf="activeKey2!=2?true:false" style="border-bottom:1px solid rgba(188,188,188,1);"></div>
    <div *ngIf="brandList">
      <span class="filtrate-connect-span" *ngFor="let item of brandList;let idx=index" (click)="onProcBrand(idx)"
        [ngClass]="{true: 'brand-sapn-class-1',false:'brand-sapn-class'}[item.select]">{{item.procBrandName}}</span>
    </div>
  </div>


  <div class="filtrate-item" (click)="openItem(3)">
    <ion-label>Colors</ion-label>
    <img *ngIf="activeKey3!=3?true:false" class="filtrate-item-img" src="../../../../assets/img/f-right.png" alt="">
    <img *ngIf="activeKey3==3?true:false" class="filtrate-item-img-1" src="../../../../assets/img/down.png" alt="">
  </div>
  <div class="filtrate-connect">
    <div *ngIf="activeKey3!=3?true:false" style="border-bottom:1px solid rgba(188,188,188,1);"></div>
    <div *ngIf="colorList">
      <div class="filtrate-connect-div" *ngFor="let item of colorList;let idx=index;">
        <!-- <label [ngStyle]="{background: item.color}"></label>
            <br>
            <span>{{item.procColor}}</span> -->
        <label [ngStyle]="{background: item.color}"
          [ngClass]="{true: 'brand-sapn-class-1',false:'brand-sapn-class'}[item.select]" (click)="onColorList(idx)">
          {{item.procColor}}
          <!-- <span style="width: 50px;display: inline-block;">{{item.procColor}}</span> -->
        </label>

      </div>
    </div>
  </div>


  <div class="filtrate-item" (click)="openItem(4)">
    <ion-label>ALl Categories</ion-label>
    <img *ngIf="activeKey4!=4?true:false" class="filtrate-item-img" src="../../../../assets/img/f-right.png" alt="">
    <img *ngIf="activeKey4==4?true:false" class="filtrate-item-img-1" src="../../../../assets/img/down.png" alt="">
  </div>
  <div class="filtrate-connect">
    <div *ngIf="activeKey4!=4?true:false" style="border-bottom:1px solid rgba(188,188,188,1);"></div>
    <div *ngIf="categoryData">
      <span class="filtrate-connect-span" *ngFor="let item of categoryData;let idx=index" (click)="onCategoryData(idx)"
        [ngClass]="{true: 'brand-sapn-class-1',false:'brand-sapn-class'}[item.select]">{{item.procClassName}}</span>
    </div>
  </div>

  <ion-item lines='none' style="margin-top: 20ox;">
    <ion-label>Price Range ($) </ion-label>
  </ion-item>

 
  <div class="div-input">
    <ion-input type="number" placeholder="Lowest price" [(ngModel)]="minMoney"></ion-input>
    <span></span>
    <ion-input type="number" placeholder="Highest price" [(ngModel)]="MaxMoney"></ion-input>

  </div>
  <!-- <ion-button  class="but" style="margin-top: 3rem;" expand="block" (click)="sub()">Apply</ion-button> -->

</ion-content>